<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
import henan_geo from "@/assets/data/henan_geo.json";

const oChart = ref<HTMLDivElement | null>(null);
onMounted(() => {
    echarts.registerMap("henan", JSON.stringify(henan_geo));
    const myChart = echarts.init(oChart.value);
    const option = {
        tooltip: {},
        visualMap: {
            left: "right",
            show: false,
            min: 0,
            max: 1000,
            inRange: {
                color: ["#104d4d", "rgb(241, 247, 97)"],
            },
            text: ["High", "Low"],
            calculable: true,
        },
        series: {
            type: "map3D",
            name: "河南省",
            map: "henan",
            regionHeight: 0,
            light: {
                main: {
                    shadow: true,
                    shadowQuality: "ultra",
                },
                ambient: {},
            },
            viewControl: { autoRotate: true, distance: 120, autoRotateSpeed: 5 },
            label: { color: "#92dde1", fontSize: 18, fontWeight: "bold" },
            itemStyle: { color: "#082727", borderWidth: 1, borderColor: "#92dde1" },
            data: [
                { name: "郑州市", label: { show: true }, value: 857, height: 1 + 857 / 100, itemStyle: { borderWidth: 2 } },
                { name: "开封市", label: { show: true }, value: 375, height: 1 + 375 / 100, itemStyle: { borderWidth: 2 } },
                { name: "洛阳市", label: { show: true }, value: 324, height: 1 + 324 / 100, itemStyle: { borderWidth: 2 } },
                { name: "平顶山市", value: 34, height: 1 + 34 / 100, itemStyle: { borderWidth: 2 } },
                { name: "安阳市", value: 2, height: 1 + 2 / 100, itemStyle: { borderWidth: 2 } },
                { name: "鹤壁市", value: 6, height: 1 + 6 / 100, itemStyle: { borderWidth: 2 } },
                { name: "新乡市", value: 84, height: 1 + 84 / 100, itemStyle: { borderWidth: 2 } },
                { name: "焦作市", value: 51, height: 1 + 51 / 100, itemStyle: { borderWidth: 2 } },
                { name: "濮阳市", value: 31, height: 1 + 31 / 100, itemStyle: { borderWidth: 2 } },
                { name: "许昌市", value: 144, height: 1 + 144 / 100, itemStyle: { borderWidth: 2 } },
                { name: "漯河市", value: 211, height: 1 + 211 / 100, itemStyle: { borderWidth: 2 } },
                { name: "三门峡市", value: 14, height: 1 + 14 / 100, itemStyle: { borderWidth: 2 } },
                { name: "南阳市", value: 24, height: 1 + 24 / 100, itemStyle: { borderWidth: 2 } },
                { name: "商丘市", value: 246, height: 1 + 246 / 100, itemStyle: { borderWidth: 2 } },
                { name: "信阳市", value: 256, height: 1 + 256 / 100, itemStyle: { borderWidth: 2 } },
                { name: "周口市", value: 61, height: 1 + 61 / 100, itemStyle: { borderWidth: 2 } },
                { name: "驻马店市", value: 3, height: 1 + 3 / 100, itemStyle: { borderWidth: 2 } },
                { name: "济源市", value: 8, height: 1 + 8 / 100, itemStyle: { borderWidth: 2 } },
            ],
        },
    };
    myChart.setOption(option);
});
</script>

<template>
    <div class="map-area">
        <div class="bg"></div>
        <div ref="oChart" class="chart"></div>
    </div>
</template>

<style lang="scss" scoped>
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.map-area {
    position: relative;
    width: 100%;
    height: 100%;
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 800px;
        height: 800px;
        background: url("@/assets/images/circle.png") 0 0 / 100% 100%;
        animation: rotate 20s ease-in-out infinite alternate-reverse;
    }
    .chart {
        position: relative;
        width: 100%;
        height: 100%;
    }
}
</style>
